<template>
  <div class="image_list">
    <div
      class="item_box"
      v-for="item in props.baseList"
      :key="item.id"
      @click="chooseMaterial(item)">
      <el-image :src="item.thumbnail_url" fit="cover" class="image"></el-image>
      <div class="cover" :class="{icon_radar:item.is_radar==1}" @click.stop="playVideo1(item)">
        <img
          src="@/assets/image/friendcirclemat/video_play_icon.png"
          alt=""
        />
      </div>
      <div class="icon_box">
        <img
          v-if="item.isCheck"
          src="@/assets/image/friendcirclemat/image_choose.png"
          alt=""
        />
      </div>
      <div class="item_title" :title="item?.file_name">{{item?.file_name }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import bus from "@/utils/bus";
import { ElMessage } from "element-plus";
const emit = defineEmits(["getData", 'videoFun']);
// const props = defineProps(["baseList", "remainNum",'selectBaseList']);

interface PropsType {
  baseList?: any[],
  selectBaseList?: any[],
  remainNum?: (string | number),
  multiple?: boolean,
  totalNum: number
}
const props = withDefaults(defineProps<PropsType>(), {
  baseList: ()=>[],
  selectBaseList: ()=>[],
  remainNum: 0,
  multiple: true,
  totalNum: 9
})

const chooseMaterial = (item: any) => {
  let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id);
  let deleteItem = null
  if(props.multiple){
    if (indx === -1) {
      if (props.remainNum <= 0) {
        // ElMessage.warning(`最多可选${props.selectBaseList.length == 0 ? 9 :props.selectBaseList.length }个素材`)
        ElMessage.error(`最多可选${props.totalNum}个素材`);
        return
      }
      item.isCheck = true
      props.selectBaseList.push(item)
    } else {
      deleteItem = item
      props.selectBaseList.splice(indx, 1)
      item.isCheck = false
    }
  }else{
    if (indx === -1) {
      props.baseList.forEach(ite=>{
        ite.isCheck = false
      })
      item.isCheck = true
      props.selectBaseList.splice(0)
      props.selectBaseList.push(item)
    } else {
      item.isCheck = false
      props.selectBaseList.splice(0)
    }
  }
  emit("getData", {
    deleteItem,
    id: '4',
    type: 2,
    typeStr: "video",
    data: props.selectBaseList,
  });
};

onMounted(()=>{
  if(props.selectBaseList.length){
    emit('getData', {
      deleteItem: null,
      id: '4',
      type: 2,
      typeStr: "video",
      data: props.selectBaseList
    })
  }
})

// 播放视频
const playVideo1 = (item: any) => {
  emit('videoFun', item?.absolute_url)
  console.log('item - - -   ', item)
  // bus.emit("videoFunFlag");
  // bus.emit("videoFunUrl", item.absolute_url);
};


</script>

<style lang="scss" scoped>
.image_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .item_box {
    cursor: pointer;
    width: 110px;
    margin-right: 11px;
    margin-bottom: 12px;
    position: relative;
    .item_title{
      font-size: 14px;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .image {
      width: 100%;
      height: 110px;
    }
    .icon_box {
      position: absolute;
      width: 16px;
      height: 16px;
      top: 6px;
      left: 6px;
      background: white;
      cursor: pointer;
      z-index: 100;
      &.active {
        border-radius: 50%;
      }
      img {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }
    .cover {
      position: absolute;
      width: 100%;
      height: 110px;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .icon_radar{
    position: relative;
    &::after{
      content: '';
      width: 20px;
      height: 20px;
      background: url('@/assets/image/material/radar_red.png') no-repeat center;
      background-size: cover;
      position: absolute;
      top: 3px;
      left: 85px;
    }
  }
  .item_box:nth-child(5n) {
    margin-right: 0;
  }
}
</style>
